$def with (strategy_code,strategy_name,transaction_count,winning_count)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人中心 ace.js</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/study.css">
    <script src="/js/jquery.js"></script>
</head>

<body>
<header class="header">
    <div class="column">
        <img class="logo" src="http://our8pafcg.bkt.clouddn.com/zhike/images/logo.png" alt="智客">
    </div>
    <div class="column column-right">
        <a href="/">首页</a>
        <a href="/study" class="active-tab">开始研究</a>
        <a href="/personal_center">个人中心</a>
        <a href="/help">帮助</a>
        <button class="btn btn-default btn-radius" id="logout" >退出登录</button>
    </div>
</header>
<div class="container">
    <div class="top-wrapper">
        <div>
	    $if strategy_name:
            	<input id="strategy_name_id" placeholder="策略名" style="border:none;outline:none;font-size:13px" value=$strategy_name />
	    $else:
		<input id="strategy_name_id" placeholder="策略名" style="border:none;outline:none;font-size:13px" value="" />
            <span class="tips_cls" style="color:red;font-size:10px">策略名唯一</span>
            <span class="tips_runcode_cls" style="color:red;font-size:10px"></span>
        </div>

        <div>
            <button class="btn btn-primary btn-radius runcode">运行</button>
            <button class="btn btn-save" id="save_strategy">保存</button>
            <input hidden style="border:none;outline:none;font-size:13px"/>
            <span class="tips_save_cls" style="color:red;font-size:10px"></span>
        </div>
    </div>
    <div class="main-wrapper">
        <div class="code-wrapper">
            <div id="editor">$strategy_code </div>
        </div>
        <div class="result-wrapper">
            <table>
                <tr>
                    <td>总收益率</td>
                    <td>胜率</td>
                    <td>最大回撤</td>
                    <td id="transaction_count_id" hidden>$transaction_count</td>
                    <td id="winning_count_id" hidden>$winning_count</td>
                    <td rowspan="2">
                        <span class="start-fund">初始资金&nbsp;
                            <span class="money">&yen;</span>&nbsp;
                            <input id="init_capital_id" type="number" />
                        </span>
                    </td>
                    <td rowspan="2">
                        收益&nbsp;&nbsp;<span class="money">&yen;</span>
                        <span class="money gain">0.00</span>
                    </td>
                    <td rowspan="2" class="tar">
                        <button class="btn btn-primary btn-radius runcode">运行回测</button>
                    </td>
                </tr>
                <tr>
                    <td><span id="total_gain_id">0.000%</span> </td>
                    <td><span id="winning_rate_id">0.000%</span></td>
                    <td><span id="max_retracement_rate_id">0.000%</span></td>
                </tr>
            </table>
            <div id="chart"></div>
        </div>
    </div>
</div>

<!-- 源代码编辑器插件 -->
<script src="https://cdn.bootcss.com/ace/1.2.8/ace.js"></script>
<!-- 引入编辑器 python 支持插件 -->
<script src="https://cdn.bootcss.com/ace/1.2.8/mode-python.js"></script>
<!-- 加载 ace 语言工具, 构建自动补全 -->
<script src="https://cdn.bootcss.com/ace/1.2.7/ext-language_tools.js"></script>
<!-- 统计图 -->
<script src="http://our8pafcg.bkt.clouddn.com/zhike/./js/echarts.min.js?v=1"></script>
<!--For logout-->
<script src="/js/validation_logout.js"></script>
<script src="/js/validation_study.js"></script>

<script>
    /* 代码编辑器 */
    // Finding an instance:
    //var editor = ace.edit("myInput"); // 通过节点初始化编辑器
    var editor = ace.edit("editor"); // 通过节点初始化编辑器
    var PythonMode = ace.require("ace/mode/python").Mode;// 获取 python 模式
    editor.session.setMode(new PythonMode()); // 配置编辑器 支持 python
    
    // 开启自动完成和代码补全
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    });

	//获取编辑的代码
    // Getting/Setting Values:
	//var code = editor.getValue()

    /* 统计图 */
    // 使用 DOM节点 初始化echarts实例
    var chart = echarts.init(document.getElementById('chart'));
    // 基础配置
    var baseOption = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#328bf4'
      }, // 提示框组件
      xAxis: {
        type: 'category', // 类目轴
        boundaryGap: false, // 两边不留白
        data: []
      },
      yAxis: { // Y 轴
        type: 'value',
      },
      grid: { // 控制坐标轴位置
        top: 10,
        left: 60,
        right: 65,
      },
      dataZoom: [{
        startValue: 0, /* 显示数组值中的 0~10 (index) */
        endValue: 9
      }], // 区域缩放组件,图表下方显示区域缩放滚动条
      series: [{
        type: 'line', // 折线图
        smooth: false, // 直线
        sampling: 'average', // 优化图表的绘制效率,取过滤点的平均值
        areaStyle: { // 区域填充样式
          normal: {
            color: 'rgba(73, 152, 244, 0.1)'
          }
        },
        data: [],
        color: ['#328bf4'] // 折线颜色
      }]
    }; // 基础配置
    chart.setOption(baseOption); // 基础配置

    var date = []; // X 轴坐标轴刻度数据
    var data = []; // 数据列表

    // 配置数据
    chart.setOption({
      xAxis:{data: date},
      series: [{data: data}]
    });

    //全局变量
    var init_capital = 0;
    var transaction_count = 0;
    var winning_rate = 0;
    var max_retracement_rate = 0;
    var neat_gain = 0;
    var total_gain_rate = 0;
    jQuery(document).ready(function(){
            jQuery("#strategy_name_id").on("mouseout", function(event){
                event.preventDefault();
                //alert("MOUSEOUT works");
                //alert(jQuery(event.target).val());
                var input_text = jQuery(event.target).val()
                if (input_text == null || input_text == undefined || input_text == ""){
                    //alert("判断是否为空");
                    jQuery(".tips_cls").text("策略名不能为空");
                    return;
                }
                jQuery.ajax({
                    scriptCharset: 'utf-8',
                    type: "POST",
                    url: "/validation_strategy_name",
                    contentType:"application/json",
                    data: JSON.stringify({
                        "value": jQuery(event.target).val()
                    }),
                    dataType: "json",
                    success: function(success) {
                        //alert("Name sent");
                    },
                    error: function(error) {
                        //alert("No sent");
                    }
                });
            });

            jQuery("#save_strategy").on("click", function(event) {
                event.preventDefault();

                //alert(jQuery("#init_capital_id").val());
                jQuery.ajax({
                    scriptCharset: 'utf-8',
                    type: "POST",
                    url: "/save_strategy",
                    contentType:"application/json",
                    data: JSON.stringify({
                        "phonenumber": document.cookie.split(';')[1].split('=')[1],
                        "code": editor.getValue(),
                        "strategy_name": jQuery(event.target).parent().siblings().children("#strategy_name_id").val(),
                        //"init_capital": jQuery("#init_capital_id").val()
                        "init_capital": init_capital,
                        "transaction_count": transaction_count,
                        "winning_rate": winning_rate,
                        "max_retracement_rate": max_retracement_rate,
                        "neat_gain": neat_gain,
                        "total_gain_rate": total_gain_rate,
                        "date": date,
                        "data": data
                    }),
                    dataType: "json",
                    success: function(success) {
                        jQuery(".tips_save_cls").text("策略已保存");
                        //alert("Strategy is saved.");
                    },
                    error: function(error) {
                        alert("data NOT get.");
                    }
                });
            });

            jQuery(".runcode").on("click", function(event) {
                event.preventDefault();
                jQuery.ajax({
		            scriptCharset: 'utf-8',
		            type: "POST",
                    url: "/runcode",
                    contentType: "application/json",
                    data: JSON.stringify({
                        "code": editor.getValue()
                    }),
                    dataType: "json",
                    success: function(result) {
                        var date = result["date"];
                        var data = result["data"];
                        var info = result["info"];

                        var init_capital = parseFloat(info[0]);
                        var transaction_count = parseInt(info[1]);
                        var winning_rate =parseFloat(info[2]);
                        var max_retracement_rate = parseFloat(info[3]);
			var neat_gain = parseFloat(info[4]);
                        var total_gain = parseFloat(info[5]);
		  	neat_gain = Math.round(neat_gain*100)/100;
		  	winning_rate = Math.round(winning_rate*1000)/1000;
		  	max_retracement_rate = Math.round(max_retracement_rate*1000)/1000;
		  	total_gain = Math.round(total_gain*1000)/1000;

                        jQuery("#total_gain_id").text(100*total_gain+"%");
                        jQuery(".gain").text(neat_gain);
                        jQuery("#winning_rate_id").text(100*winning_rate+"%");        
                        jQuery("#max_retracement_rate_id").text(100*max_retracement_rate+"%");        
                        chart.setOption({
                            xAxis:{data: date},
                            series: [{data: data}]
                         });
                    },
                    error: function(result) {
                        jQuery(".tips_cls").text("");
                        jQuery(".tips_runcode_cls").text("代码格式错误");
                        //alert("error: data are not obtained.");
                    }
                });
            });

            jQuery('#strategy_name_id').focus( function(){
                jQuery(".tips_cls").text("");
                jQuery(".tips_runcode_cls").text("");
            });
});
       
</script>
</body>
</html>
